<script setup lang="ts" name="App">
import { ref } from 'vue'
const h3Ele = ref<HTMLHeadingElement | null>(null)

const handleClick = () => {
  // 报错了
  // console.log(h3Ele.value.getAttribute)
  // 解决方式 1
  /* if (h3Ele.value) {
    console.log(h3Ele.value.getAttribute)
  } */
  // 解决方式 2
  // console.log(h3Ele.value && h3Ele.value.getAttribute)
  // 解决方式 3
  // h3Ele.value && console.log(h3Ele.value.getAttribute)
  // 解决方式 4: 断言
  // console.log((h3Ele.value as HTMLHeadingElement).getAttribute)
  // 解决方式5：?. 表示是可选链操作符，左边有（不为 null 或 undefined）就往右边取值，一旦为 null 或 undefined 整体返回 undefined
  // console.log(h3Ele.value?.getAttribute)
  // 解决方式6：非空断言
  console.log(h3Ele.value!.getAttribute)
}
// console.log(h3Ele.value?.getAttribute)
</script>
<template>
  <div>
    <!-- #2 和 h3 的 ref 属性进行绑定 -->
    <h3 ref="h3Ele">Hello Vue3 + TS</h3>

    <button @click="handleClick">改变颜色</button>
  </div>
</template>
